<!DOCTYPE html>
<!-- 排列方式: 水平排列 / 垂直排列 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>排列方式</title>

        <style type="text/css">
            /* class selector */
            .xyz {
                border: 1px dotted blue ;
                height: 50px ;
                line-height: 50px ; /* 若元素内部只有单行文本，则行高与元素高度相同时，可以让单行文本垂直居中 */
                text-align: center ; /* 水平排列方式: left | center | right | justify | inherit */
            }

            /* class selector */
            .tab { border: 1px solid blue ; width: 80% ; }

            /* 后代选择器 (复合选择器) */
            .tab td { 
                border: 1px solid blue ; 
                height: 100px ; 
                width: 20% ;
                text-align: right ; /* 水平排列方式: left | center | right | justify | inherit */
                vertical-align: bottom ; /* 垂直排列方式: top | middle | bottom */
            }
        </style>

    </head>
    <body>

        <h3 class="xyz" >排列方式</h3>

        <p class="xyz">这里测试元素内部内容的排列方式</p>

        <div class="xyz" >一个块元素中可以包含文字也可以包含图片、视频等内容</div>

        <hr>

        <table class="tab">
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
                <td>35</td>
            </tr>
        </table>
        
    </body>
</html>